<template>
  <view class="watch-live-container mx-[30rpx]">
    <template v-for="(item, index) in 5" :key="index">
      <view
        class="live-item module-part h-[456rpx] mb-[20rpx] flex flex-row items-center"
        @click="scanLiveDetail(item)"
      >
        <view
          class="w-[100%] h-[100%] module-part flex flex-col relative text-center"
        >
          <view class="grow relative">
            <image
              src="https://img1.baidu.com/it/u=261249861,1096372910&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
              mode="aspectFit"
              class="w-[100%] h-[100%] rounded-t-[16rpx]"
            />
            <view
              class="live-title h-[80rpx] px-[30rpx] text-[#fff] text-[28rpx] flex flex-row items-center justify-between absolute bottom-0"
            >
              <view
                class="grow max-w-full overflow-hidden text-ellipsis line-clamp-1 mr-[50rpx]"
                >直播标题，这是一个直播标题是一个直播标题</view
              >
              <view class="flex flex-row items-center">
                <image
                  src="@/static/images/icon-share1.png"
                  mode="aspectFit"
                  class="w-[36rpx] h-[36rpx]"
                />
                <image
                  src="@/static/images/icon-esc.png"
                  mode="aspectFit"
                  class="w-[36rpx] h-[36rpx] ml-[32rpx]"
                />
              </view>
            </view>
          </view>
          <view
            class="h-[66rpx] px-[30rpx] flex flex-row items-center justify-between"
          >
            <view class="text-[#999] text-[22rpx]">10月10日 20:00</view>
            <view
              class="text-[#333] text-[20rpx] flex flex-row items-center"
              @click.stop="openPopup()"
            >
              <image
                src="@/static/images/icon-pj.png"
                mode="aspectFit"
                class="w-[26rpx] h-[26rpx] mr-[8rpx]"
              />
              <view>评价</view>
            </view>
          </view>
          <view
            class="absolute top-[30rpx] right-[30rpx] z-10"
            @click.stop="onCollectLive()"
          >
            <template v-if="isCollect">
              <image
                src="@/static/images/icon-collect1.png"
                mode="aspectFit"
                class="w-[60rpx] h-[60rpx]"
              />
            </template>
            <template v-else>
              <image
                src="@/static/images/icon-uncollect1.png"
                mode="aspectFit"
                class="w-[60rpx] h-[60rpx]"
              />
            </template>
          </view>
        </view>
      </view>
    </template>
    <uni-popup ref="popupRef" type="bottom">
      <view
        class="title bg-[#F7F7F9] h-[110rpx] leading-[110rpx] text-[#333333] text-[34rpx] text-center rounded-t-[40rpx]"
        >评价</view
      >
      <view class="h-[738rpx] px-[30rpx] py-[40rpx] box-border bg-white">
        <view class="flex flex-row items-center justify-between">
          <template v-for="(item, index) in evaLevel" :key="index">
            <view
              class="w-[210rpx] h-[160rpx] rounded-[16rpx] flex flex-col justify-center items-center"
              :class="evaNum == index ? 'avtive-eva-item' : 'normal-eva-item'"
              @click="onChangeEvaType(index)"
            >
              <image
                :src="evaNum == index ? item.activeIcon : item.normalIcon"
                mode="aspectFit"
                class="w-[54rpx] h-[54rpx] mb-[16rpx]"
              />
              <view>{{ item.name }}</view>
            </view>
          </template>
        </view>
        <uni-easyinput
          type="textarea"
          v-model="content"
          placeholder="请输入内容…"
          :placeholderStyle="{ color: '#999', fontSize: '28rpx' }"
          :maxlength="300"
          class="mt-[44rpx] mb-[68rpx]"
        ></uni-easyinput>
        <view class="">
          <button
            hover-class="none"
            class="bg-[#1E92F0] color-white text-[30rpx] rounded-[48rpx] h-[98rpx] leading-[98rpx]"
            :disabled="isDisabled"
            @click="onSubmit"
          >
            提交
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import iconGreat0 from "@/static/images/icon-great-0.png";
import iconNormal0 from "@/static/images/icon-normal-0.png";
import iconPoor0 from "@/static/images/iocn-poor-0.png";
import iconGreat1 from "@/static/images/icon-great-1.png";
import iconNormal1 from "@/static/images/icon-normal-1.png";
import iconPoor1 from "@/static/images/iocn-poor-1.png";

const users = reactive([]);
const isCollect = ref(false);
const popupRef = ref(null);
const evaLevel = reactive([
  {
    name: "好",
    activeIcon: iconGreat1,
    normalIcon: iconGreat0,
  },
  {
    name: "一般",
    activeIcon: iconNormal1,
    normalIcon: iconNormal0,
  },
  {
    name: "差",
    activeIcon: iconPoor1,
    normalIcon: iconPoor0,
  },
]);
const evaNum = ref(0);
const content = ref("");

const onCollectLive = () => {
  isCollect.value = !isCollect.value;
  uni.showToast({
    // icon: "success",
    icon: "none",
    image: "/static/images/icon-success.png",
    title: "操作成功",
  });
};
const openPopup = () => {
  popupRef.value?.open();
};
const onChangeEvaType = (index: any) => {
  evaNum.value = index;
};
const onSubmit = () => {
  evaNum.value = 0;
  content.value = "";
  popupRef.value?.close();
};
const scanLiveDetail = (item: any) => {
  uni.navigateTo({
    url: "/subPages/home/liveLitigation/detail",
  });
};
</script>

<style lang="scss" scoped>
.watch-live-container {
  .live-title {
    background: rgba(0, 0, 0, 0.5);
  }
  .live-item:last-child {
    margin-bottom: 0;
  }
  .avtive-eva-item {
    background: #1e92f0;
    color: #fff;
  }
  .normal-eva-item {
    background: #f7f7f9;
    color: #0c2f5b;
  }
  :deep(.uni-easyinput__content-textarea) {
    height: 260rpx;
    min-height: 260rpx;
    min-height: 260rpx;
  }
  :deep(.is-input-border) {
    border: 1rpx solid #e8e9ec;
  }
}
</style>
